<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
// import { NDataTable, NButton, NCard, NInput, NGrid, NGi, NGridItem, NFlex, NVirtualList, NDialogProvider, useDialog, createDiscreteApi, treeDark, NModal, NFormItem,NSpace } from 'naive-ui'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import showForm from '@/components/show-form/index.vue'
import showTable from '@/components/show-table/index.vue'
import svgIcon from '@/components/base-svgIcon/index.vue';
import { IconArr } from '../../assets/utils/svgIcon';
import canvasTableHead from '@/components/canvas-table/index.vue';
import { useMenuRecordStore } from '@/stores/menuRecord'
import { useRouter } from 'vue-router';
import { showMsg } from '@/assets/utils/tools';
import type { StepsProps } from 'naive-ui'
import { FORM_ADD, FORM_SAVE } from '../../service/apis/from';
import { Editor, RowFlex, ElementType,ControlType } from '@hufe921/canvas-editor'
import { HotTable } from '@handsontable/vue3';
import { setUrl } from "@/service/sseUrl";
import Papa from "papaparse";
import 'handsontable/dist/handsontable.full.css';//表格样式
import { registerAllModules } from 'handsontable/registry'; // 在线编辑样式
import 'handsontable/languages/zh-CN'; //汉语包
import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
import { registerPlugin, UndoRedo } from 'handsontable/plugins';
import {
    DocumentOnePage20Regular, DocumentPageBreak20Regular,
    Subtract16Filled, Add16Filled, DocumentPageTopCenter24Regular,
    FullScreenMaximize16Regular, FullScreenMinimize24Regular, Settings24Regular,
    DocumentMargins24Regular, ArrowUndo48Regular, ArrowRedo48Filled, PaintBrush24Regular, Eraser24Regular,
    TextUnderline24Regular, TextItalic24Regular, TextBold24Filled, FontDecrease24Regular, FontIncrease24Regular,
    TextStrikethrough24Filled, TextSuperscript24Regular, TextSubscript24Regular, TextColor24Filled,
    TextCaseTitle24Regular, TextNumberListLtr24Regular, ArrowAutofitContent24Regular, TextColumnOne24Regular,
    TableSwitch24Regular, Image24Regular, Link24Regular, DataWaterfall24Regular, Code24Regular, DocumentPageBreak24Regular,
    ControlButton24Regular, CheckboxChecked24Regular, RadioButton24Filled, Timer24Regular, Search24Regular, Print24Filled, TextColorAccent24Filled,
    TextAlignJustify24Regular, TextAlignLeft24Regular, TextAlignRight24Regular, TextAlignCenter24Regular, TextAlignDistributedEvenly24Regular
} from '@vicons/fluent'
registerAllModules();
registerCellType(NumericCellType);
registerPlugin(UndoRedo);

const stepRef = ref<any>(null)
const stepRef1 = ref<any>(null)
const stepRef2 = ref<any>(null)
const stepRef3 = ref<any>(null)
const stepRef4 = ref<any>(null)
const stepRef5 = ref<any>(null)
const stepRef6 = ref<any>(null)
const stepRef7 = ref<any>(null)
const stepCurrent = ref<any>(1)
const currentStatus = ref<StepsProps['status']>('process')
    const active = ref(false)
    const placement = ref()


const inputValue = ref<any>()

const chatlist1 = ref<any>([
    // {
    //     id: 1,
    //     position: 'left',
    //     text: '嘻嘻嘻嘻'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'left',
    //     text: '嘻嘻嘻嘻'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'left',
    //     text: '嘻嘻嘻嘻'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // }
])
const chatlist2 = ref<any>([])
const chatlist3 = ref<any>([])
const chatlist4 = ref<any>([])
const chatlist5 = ref<any>([])
const chatlist6 = ref<any>([])

const showModal = ref<Boolean>(false)
const options = ref([
    {
        label: 'word',
        value: 'word'
    },
    {
        label: 'excel',
        value: 'excel'
    },
    {
        label: 'echarts-word',
        value: 'echarts-word'
    }, {
        label: 'echarts-excel',
        value: 'echarts-excel'
    }, {
        label: 'echarts-3d',
        value: 'echarts-3d'
    },
]);

const scrollListRef = ref<any>(null)
const scrollHeight = ref(0)

const arrList = ref<any>([])
const wordRef = ref<any>(null)
const hotTableRef = ref<any>(null);

const instance = ref<any>()
const placeholder = ref<any>('请输入应用的名称')

const settings = ref<any>(
    {
        language: 'zh-CN', // 官方汉化
        licenseKey: 'non-commercial-and-evaluation', //去除底部非商用声明

        //colHeaders     
        colHeaders: [],
        // currentRowClassName: 'currentRow', // 突出显示行
        // currentColClassName: 'currentCol', // 突出显示列
        // minSpareRows: 2, //行留白
        // autoWrapRow: false, //自动换行
        // minRows: 0,
        trimWhitespace: false, //去除空格
        rowHeaderWidth: 100, //单元格宽度
        stretchH: 'all',
        renderAllRows: false,
        rowHeaders: true, // 行标题   布尔值 / 数组/  函数
        formulas: false, //公式
        copyable: true, // 允许键盘复制
        wordWrap: false, // 自动换行
        copyPaste: true, //复制粘贴
        filters: false, //允许通过内置组件或API过滤表数据
        search: false,
        fixedColumnsLeft: 0, // 固定左边列数
        fixedRowsTop: 0, // 固定上边列数
        columnSorting: true, // 排序
        contextMenu: true, //右键菜单
    },
)
const popselectValue = ref()
const fontSizeValue = ref()
const fontList = [
    { label: '微软雅黑', value: '微软雅黑', style: "font-family:'Microsoft YaHei';" },
    { label: '华文宋体', value: '华文宋体', style: "font-family:'华文宋体';" },
    { label: '华文黑体', value: '华文黑体', style: "font-family:'华文黑体';" },
    { label: '华文仿宋', value: '华文仿宋', style: "font-family:'华文仿宋';" },
    { label: '华文楷体', value: '华文楷体', style: "font-family:'华文楷体';" },
    { label: '华文琥珀', value: '华文琥珀', style: "font-family:'华文琥珀';" },
    { label: '华文楷体', value: '华文楷体', style: "font-family:'华文楷体';" },
    { label: '华文隶书', value: '华文隶书', style: "font-family:'华文隶书';" },
    { label: '华文新魏', value: '华文新魏', style: "font-family:'华文新魏';" },
    { label: '华文行楷', value: '华文行楷', style: "font-family:'华文行楷';" },
    { label: '华文中宋', value: '华文中宋', style: "font-family:'华文中宋';" },
    { label: '华文彩云', value: '华文彩云', style: "font-family:'华文彩云';" },
    { label: 'Arial', value: 'Arial', style: "font-family:'Arial';" },
    { label: 'Segoe ul', value: 'Segoe ul', style: "font-family:'Segoe UI';" },
    { label: 'Ink Free', value: 'Ink Free', style: "font-family:'Ink Free';" },
    { label: 'Fantasy', value: 'Fantasy', style: "font-family:'Fantasy';" },

]

const fontSizeList = [
    { label: '初号', value: '初号', size: '56' },
    { label: '小初', value: '小初', size: '48' },
    { label: '一号', value: '一号', size: '34' },
    { label: '小一', value: '小一', size: '32' },
    { label: '二号', value: '二号', size: '29' },
    { label: '小二', value: '小二', size: '24' },
    { label: '三号', value: '三号', size: '21' },
    { label: '小三', value: '小三', size: '20' },
    { label: '四号', value: '四号', size: '18' },
    { label: '小四', value: '小四', size: '16' },
    { label: '五号', value: '五号', size: '14' },
    { label: '小五', value: '小五', size: '12' },
    { label: '六号', value: '六号', size: '10' },
    { label: '小六', value: '小六', size: '8' },
    { label: '七号', value: '七号', size: '7' },
    { label: '八号', value: '八号', size: '6' },

]
const kjList = ref([
    { label: '单选', key: '1', },
    { label: '复选', key: '2', },
    { label: '时间', key: '3',  }
])

onMounted(() => {
    scrollHeight.value = scrollListRef.value.offsetHeight

})
onUnmounted(() => {

})



setTimeout(() => {
    chatlist1.value.push({
        id: 1,
        position: 'left',
        text: '你好，欢迎使用AI智能助手创建应用'
    })
}, 1000)

function send() {

    console.log(inputValue.value, typeof (arrList), inputValue.value.indexOf('@'),);

    if (inputValue.value !== '图标') {
        if (inputValue.value == '编辑完成') {
            if (arrList.value[3] == 'word' || arrList.value[3] == 'echart-word' || arrList.value[3] == 'echart-3d') {
                // console.log(instance.value.command.getHTML());

                arrList.value.push(instance.value.command.getHTML());
            }
            if (arrList.value[3] == 'excel' || arrList.value[3] == 'echart-excel') {
                arrList.value.push(hotTableRef.value.hotInstance.getData())
            }
        } else {
            let str = ''
            // console.log('bbbbbb',inputValue.value.indexOf('@word') > -1);
            // console.log('bbbbbb',inputValue.value.indexOf('@echarts-word')> -1 );
            // console.log('bbbbbb',inputValue.value.indexOf('@echarts-excel')> -1);
            // console.log('bbbbbb', inputValue.value.indexOf('@echarts-3d')> -1);
            // console.log('bbbbbb', inputValue.value.indexOf('@echarts-3d')> -1);
            if (inputValue.value.indexOf('@word') > -1 || inputValue.value.indexOf('@echarts-word') > -1 || inputValue.value.indexOf('@echarts-excel') > -1 || inputValue.value.indexOf('@echarts-3d') > -1) {
                str = inputValue.value.substring(1, inputValue.value.length - 1)
                arrList.value.push(str)
            } else {
                arrList.value.push(inputValue.value)
            }
        }

    } else {
        arrList.value.push(inputValue.value)
    }

    if (stepCurrent.value == 1) {
        chatlist1.value.push({
            id: 1,
            position: 'right',
            text: inputValue.value
        })
        setTimeout(() => {
            chatlist1.value.push({
                id: 1,
                position: 'left',
                text: `你的应用名称是：${inputValue.value}`
            })
            inputValue.value = ''
            next()
        }, 0)

        // addContent(chatlist1.value)
    } else if (stepCurrent.value == 2) {
        chatlist2.value.push({
            id: 1,
            position: 'right',
            text: inputValue.value
        })
        setTimeout(() => {
            chatlist2.value.push({
                id: 1,
                position: 'left',
                text: `请稍等正在为你加载图标库`
            })
            inputValue.value = ''
        }, 0)
        // addContent(chatlist2.value)

    } else if (stepCurrent.value == 3) {
        // console.log(inputValue.value);

        // debugger
        // console.log(inputValue.value.indexOf('word'));
        let subStr = ''
        if (inputValue.value.indexOf('@word')) {
            subStr = inputValue.value.substring(1, inputValue.value.length)
        }
        if (inputValue.value.indexOf('@echarts-word')) {
            subStr = inputValue.value.substring(1, inputValue.value.length)
        }
        if (inputValue.value.indexOf('@echarts-excel')) {
            subStr = inputValue.value.substring(1, inputValue.value.length)
        }
        if (inputValue.value.indexOf('@echarts-3d')) {
            subStr = inputValue.value.substring(1, inputValue.value.length)
        }




        console.log(subStr);

        chatlist3.value.push({
            id: 1,
            position: 'right',
            text: subStr
        })
        setTimeout(() => {
            chatlist3.value.push({
                id: 1,
                position: 'left',
                text: `你输入类型是：${subStr}表格`
            })
            if (arrList.value[2] != 'excel') {
                addWord()
            }
            inputValue.value = ''
            next()
        }, 0)
        // addContent(chatlist3.value)
    } else if (stepCurrent.value == 4) {
        chatlist4.value.push({
            id: 1,
            position: 'right',
            text: inputValue.value
        })
        setTimeout(() => {
            chatlist4.value.push({
                id: 1,
                position: 'left',
                text: `数据：${inputValue.value}`
            })
            inputValue.value = ''
            next()
        }, 0)

    } else if (stepCurrent.value == 5) {
        chatlist5.value.push({
            id: 1,
            position: 'right',
            text: inputValue.value
        })
        setTimeout(() => {
            chatlist5.value.push({
                id: 1,
                position: 'left',
                text: `数据文件命名为：${inputValue.value}`
            })
            inputValue.value = ''
            next()
        }, 0)

    } else if (stepCurrent.value == 6) {
        chatlist6.value.push({
            id: 1,
            position: 'right',
            text: inputValue.value
        })
        setTimeout(() => {
            chatlist6.value.push({
                id: 1,
                position: 'left',
                text: `应用使用范围为：${inputValue.value}`
            })
            inputValue.value = ''
            next()
        }, 0)

    }

    if (inputValue.value == '图标') {
        // showModal.value =true
        setTimeout(() => {
            showModal.value = true
        }, 2000)
    }
    // setTimeout(() => {
    // next()
    // }, 6000)

    // console.log(arrList,instance.value);




}

function handleUpdateValue(val: any) {
    console.log(val, stepRef.value);
    stepRef.value[0].scrollIntoView({ behavior: 'soomh', block: "start" })
}


//step向后走
function next() {
    if (stepCurrent.value == 7) {
        currentStatus.value = 'finish'
        return
    } else {
        // setTimeout(() => {
        stepCurrent.value++
        // }, 2000)

        if (stepCurrent.value == 2) {
            placeholder.value = '请输入文字 <‘图标’>获取图标库'
            setTimeout(() => {
                chatlist2.value.push({
                    id: 1,
                    position: 'left',
                    text: '你好请选择应用的图标',
                    isIcon: false
                })
            }, 2000)
        } else if (stepCurrent.value == 3) {
            // inputValue.value = '@'
            placeholder.value = '请输入@字符选择应用的类型'
            setTimeout(() => {
                chatlist3.value.push({
                    id: 1,
                    position: 'left',
                    text: '请选择应用的类型'
                })
            }, 2000)
        } else if (stepCurrent.value == 4) {


        } else if (stepCurrent.value == 5) {
            placeholder.value = '请输入数据文件命名称（格式：xxx-日期）'
            setTimeout(() => {
                chatlist5.value.push({
                    id: 1,
                    position: 'left',
                    text: '请给数据文件设置一个命名规则'
                })
                // window.scrollTo(0, 9000)
            }, 2000)


        } else if (stepCurrent.value == 6) {
            placeholder.value = '请输入应用使用的范围，以部门名称、岗位名称输入即可'
            setTimeout(() => {
                chatlist6.value.push({
                    id: 1,
                    position: 'left',
                    text: '请输入应用使用范围'
                })
            }, 2000)


        }

    }

}
//step向前走
function prev() {
    if (stepCurrent.value == 1) {
        currentStatus.value = 'process'
        return
    } else {
        stepCurrent.value--;
        currentStatus.value = 'process'
    }
}

function addContent(list: any) {
    if (inputValue.value == '' || inputValue.value == undefined) {
        showMsg('error', '请输入')
    } else {

        list.push({
            id: 1,
            position: 'right',
            text: inputValue.value
        })
        setTimeout(() => {
            list.push({
                id: 1,
                position: 'left',
                text: inputValue.value
            })
        }, 2000)

        // inputValue.value = ''
    }
}

function saveForm() {
    if (arrList.value[2] == 'word' || arrList.value[2] == 'echart-word' || arrList.value[2] == 'echart-3d') {
        arrList.value.push(instance.value.command.getValue().data);
    }
    if (arrList.value[2] == 'excel' || arrList.value[2] == 'echart-excel') {
        arrList.value.push(hotTableRef.value.hotInstance.getData())
    }

    let data = {
        类型: "应用",
        内容: {
            应用名称: arrList.value[0],
            图标名: arrList.value[2],
            类型: arrList.value[3],
            数据结构: arrList.value[4],
            文件命名: arrList.value[5],
            岗位范围: arrList.value[6]
        }
    }

    console.log('创建应用', data);
    // console.log(hotTableRef.value.hotInstance.getData());
    // console.log(instance.value.command.getValue());
    // if (arrList.value[3] == 'excel' || arrList.value[3] == 'word' || arrList.value[3].indexOf('main') == -1 || arrList.value[3]('main')) {
    // }
    FORM_ADD({ "params": JSON.stringify(data) }).then((res: any) => {
        console.log('结果', res);
        if (res.stacode == 200) {
            arrList.value = []
            chatlist1.value = []
            chatlist2.value = []
            chatlist3.value = []
            chatlist4.value = []
            chatlist5.value = []
            chatlist6.value = []
            stepCurrent.value = 1
        }
    }).catch((err: any) => {
        // console.log('err', err);
        // loading.value = false
    })
}




//word 加载
function addWord() {
    instance.value = new Editor(wordRef.value, {

        header: [
            {
                value: '山东发达面粉集团',
                size: 32,
                color: '#FF0000',
                rowFlex: RowFlex.JUSTIFY
            },
            {
                value: '\n',
                type: ElementType.SEPARATOR
            }
        ],
        main: [],
        footer: [
            {
                value: '\n',
                type: ElementType.SEPARATOR
            },
            {
                value: '集团地址：山东省济南市西城大厦10F',
                size: 18
            }
        ]
    }, {})
}


//图标选择
function iconClick(val: any) {
    //   console.log(val);
    showMsg('info', `你选择了图标是${val.name}`)
    let icon = '#icon-' + val.font_class
    arrList.value.push(icon)
    chatlist2.value.push({
        id: 1,
        position: 'left',
        text: icon,
        isIcon: true
    })
    showModal.value = false
    next()
}


function kkk() {

    let subStr = '@excel '
    // console.log(inputValue.value.indexOf('word'));
    // if(inputValue.value.indexOf('word')){
    //     subStr = inputValue.value.substring(1, 5)
    // }else{
    subStr = subStr.substring(1, subStr.length)
    // }

    console.log(subStr);
}
function handleSelect(params: any) {
    // console.log(params);
    if (params == '1') {
        instance.value?.command.executeInsertControl({
            type: ElementType.CONTROL,
            value: '',
            control: {
                conceptId: '2',
                type: ControlType.SELECT,
                value: null,
                code: null,
                placeholder: '有无',
                prefix: '{',
                postfix: '}',
                valueSets: [
                    {
                        value: '有',
                        code: '98175'
                    },
                    {
                        value: '无',
                        code: '98176'
                    },
                    {
                        value: '不详',
                        code: '98177'
                    }
                ]
            }
        })
    }
    if (params == '2') {

        instance.value.command.executeInsertControl({
            type: ElementType.CONTROL,
            value: '',
            control: {
                conceptId: '2',
                type: ControlType.SELECT,
                value: null,
                code: null,
                placeholder: '有无',
                prefix: '{',
                postfix: '}',
                valueSets: [
                    {
                        value: '有',
                        code: '98175'
                    },
                    {
                        value: '无',
                        code: '98176'
                    },
                    {
                        value: '不详',
                        code: '98177'
                    }
                ]
            }
        })

    }
    if (params == '3') {
        console.log('时间');
        let time = new Date().toLocaleString();
        instance.value.command.executeInsertElementList([{
            type: ElementType.CONTROL,
            value: time,
        }])
    }
}

function addbg() {
    instance.value.command.executeInsertTable(2, 3)
}

function openDrawer(params: any) {
 
    active.value = true
    // placement.value = 
}

function kjhandleSelect(params:any) {
    if (params == '1') {
        instance.value?.command.executeInsertControl({
            type: ElementType.CONTROL,
            value: '',
            control: {
                conceptId: '2',
                type: ControlType.SELECT,
                value: null,
                code: null,
                placeholder: '有无',
                prefix: '{',
                postfix: '}',
                valueSets: [
                    {
                        value: '有',
                        code: '98175'
                    },
                    {
                        value: '无',
                        code: '98176'
                    },
                    {
                        value: '不详',
                        code: '98177'
                    }
                ]
            }
        })
    }
    if (params == '2') {

        instance.value.command.executeInsertControl({
            type: ElementType.CONTROL,
            value: '',
            control: {
                conceptId: '2',
                type: ControlType.SELECT,
                value: null,
                code: null,
                placeholder: '有无',
                prefix: '{',
                postfix: '}',
                valueSets: [
                    {
                        value: '有',
                        code: '98175'
                    },
                    {
                        value: '无',
                        code: '98176'
                    },
                    {
                        value: '不详',
                        code: '98177'
                    }
                ]
            }
        })

    }
    if (params == '3') {
        console.log('时间');
        let time = new Date().toLocaleString();
        instance.value.command.executeInsertElementList([{
            type: ElementType.CONTROL,
            value: time,
        }])
    }

}

function popselectFontSet(val: any) {
    console.log(val);
    instance.value.command.executeFont(val)

    fontList.forEach(el => {

        if (el.value == val) {
            console.log(el);
            instance.value.command.executeSize(el.style)
        }
    })
}
function popselectSizeSet(val: any) {
    fontSizeList.forEach(el => {
        if (el.value == val) {
            instance.value.command.executeSize(el.size)
        }
    })

}
function fontSizeUndo() {
    instance.value.command.executeUndo()
}
function fontSizeAdd() {
    instance.value.command.executeSizeAdd()
}
function fontSizeMinus() {
    instance.value.command.executeSizeMinus()
}

function fontSizeUnderline() {
    instance.value.command.executeUnderline()
}
function fontSizeItalic() {
    instance.value.command.executeItalic()
}
function fontSizeBold() {
    instance.value.command.executeBold()
}
</script>
<template>
    <baseCard title="创建应用" icon="#icon-Ai">
        <template #headers>
            <div style="width: 100%; padding: 0 5px;">
                <n-steps ref="stepRef" :vertical="false" :current="stepCurrent" :status="currentStatus">
                    <n-step ref="stepRef1" title="应用命名"></n-step>
                    <n-step ref="stepRef2" title="应用图标"></n-step>
                    <n-step ref="stepRef3" title="应用类型"></n-step>
                    <n-step ref="stepRef4" title="定义数据"></n-step>
                    <n-step ref="stepRef5" title="数据文件命名"></n-step>
                    <n-step ref="stepRef6" title="应用使用范围"></n-step>
                    <n-step ref="stepRef7" title="应用保存"></n-step>
                </n-steps>
            </div>
        </template>
        <div class="lay" ref="scrollListRef" id="scrollListRef">
            <div class="lay_center" :style="{ maxHeight: scrollHeight + 'px' }">
                <div class="box">
                    <div>您好，创建应用，第一步先给应用起个名字吧</div>
                    <div v-for="(m, n) in chatlist1" :key="n">
                        <div v-if="m.position === 'left'" style="text-align:left;padding-right: 30%;">
                            <div style="display: flex;align-items: flex-start;">
                                <img src="@/assets/image/icon/robot.png" alt=""
                                    style="height: 22px;width: 20px;border-radius: 50px;margin-right: 5px;">
                                <span>{{ m.text }}</span>
                            </div>
                        </div>
                        <div v-else style="text-align:right;padding-left: 30%;">
                            <div style="display: inline-flex;align-items: flex-start;">
                                <div>
                                    <span class="" style="margin-right: 5px;">{{ m.text }}</span>
                                    <img src="@/assets/image/icon/user.png" alt=""
                                        style="height: 20px;width: 20px;margin-left: 5px">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box" v-if="stepCurrent >= 2">
                    <div>第二步给应用选择图标</div>
                    <div v-for="(m, n) in chatlist2" :key="n">
                        <div v-if="m.position === 'left'" style="text-align:left;padding-right: 30%;">
                            <!-- <span class="iconfont icon-xingming_icon">{{ m.text }}</span> -->
                            <div style="display: flex;align-items: flex-start;">
                                <img src="@/assets/image/icon/robot.png" alt=""
                                    style="height: 22px;width: 20px;border-radius: 50px;margin-right: 5px;">
                                <svgIcon v-if="m.isIcon" :icon-name="m.text"></svgIcon>
                                <span v-else class="">{{ m.text }}</span>
                            </div>
                        </div>
                        <div v-else style="text-align:right;padding-left: 30%;">
                            <!-- <svgIcon v-if="m.isIcon" :icon-name="m.text" size="subSmall"></svgIcon> -->
                            <!-- <span v-else class="">{{ m.text }}</span> -->
                            <span class="">{{ m.text }}</span>
                            <span class="iconfont icon-wodexiansuo"></span>
                        </div>
                    </div>
                </div>
                <div class="box" v-if="stepCurrent >= 3">
                    <div>第三步给应用选择应用类型</div>
                    <div v-for="(m, n) in chatlist3" :key="n">
                        <div v-if="m.position === 'left'" style="text-align:left;padding-right: 30%;">
                            <!-- <span class="iconfont icon-xingming_icon">{{ m.text }}</span> -->
                            <div style="display: flex;align-items: flex-start;">
                                <img src="@/assets/image/icon/robot.png" alt=""
                                    style="height: 22px;width: 20px;border-radius: 50px;margin-right: 5px;">
                                <span class="">{{ m.text }}</span>
                            </div>
                        </div>
                        <div v-else style="text-align:right;padding-left: 30%;">
                            <span class="">{{ m.text }}</span>
                            <span class="iconfont icon-wodexiansuo"></span>
                        </div>
                    </div>
                </div>

                <div class="box" v-if="stepCurrent >= 4">
                    <div>第三步给应用选择应用类型</div>
                    <div v-for="(m, n) in chatlist4" :key="n">
                        <div v-if="m.position === 'left'" style="text-align:left;padding-right: 30%;">
                            <!-- <span class="iconfont icon-xingming_icon">{{ m.text }}</span> -->
                            <div style="display: flex;align-items: flex-start;">
                                <img src="@/assets/image/icon/robot.png" alt=""
                                    style="height: 22px;width: 20px;border-radius: 50px;margin-right: 5px;">
                                <span class="">{{ m.text }}</span>
                            </div>
                        </div>
                        <div v-else style="text-align:right;padding-left: 30%;">
                            <span class="">{{ m.text }}</span>
                            <span class="iconfont icon-wodexiansuo"></span>
                        </div>
                    </div>

                </div>
                <!-- <div>定义数据内容{{ stepCurrent }}---{{ arrList }}</div> -->
                <div v-if="arrList[3] == 'excel'" style="width: 100%;">

                    <hot-table width="100%" height="500" :settings="settings" ref="hotTableRef"></hot-table>
                </div>
                <div v-if="arrList[3] == 'word'" style="width: 46%">
                    <div style="padding-left: 20px;">
                        <n-button size="small" type="tertiary"  @click="addbg" style="margin-right: 10px;">
                           表格
                        </n-button>
                        <n-dropdown  trigger="click" :options="kjList" @select="kjhandleSelect" >
                            <n-button size="small" style="margin-right: 10px;">控件</n-button>
                        </n-dropdown>
                        <n-button  size="small" type="tertiary" @click="openDrawer">
                            格式
                        </n-button>
                    </div>
                    <div class="word-content">
                        <div ref="wordRef" class="canvas-editor"></div>
                    </div>
                </div>
                <!-- </div> -->
                <div class="box" v-if="stepCurrent >= 5">
                    <div>第五步数据文件命名</div>
                    <div v-for="(m, n) in chatlist5" :key="n">
                        <div v-if="m.position === 'left'" style="text-align:left;padding-right: 30%;">
                            <!-- <span class="iconfont icon-xingming_icon">{{ m.text }}</span> -->
                            <div style="display: flex;align-items: flex-start;">
                                <img src="@/assets/image/icon/robot.png" alt=""
                                    style="height: 22px;width: 20px;border-radius: 50px;margin-right: 5px;">
                                <span class="">{{ m.text }}</span>
                            </div>
                        </div>
                        <div v-else style="text-align:right;padding-left: 30%;">
                            <span class="">{{ m.text }}</span>
                            <span class="iconfont icon-wodexiansuo"></span>
                        </div>
                    </div>
                </div>
                <div class="box" v-if="stepCurrent >= 6">
                    <div>第六步应用使用范围</div>
                    <div v-for="(m, n) in chatlist6" :key="n">
                        <div v-if="m.position === 'left'" style="text-align:left;padding-right: 30%;">
                            <!-- <span class="iconfont icon-xingming_icon">{{ m.text }}</span> -->
                            <div style="display: flex;align-items: flex-start;">
                                <img src="@/assets/image/icon/robot.png" alt=""
                                    style="height: 22px;width: 20px;border-radius: 50px;margin-right: 5px;">
                                <span class="">{{ m.text }}</span>
                            </div>
                        </div>
                        <div v-else style="text-align:right;padding-left: 30%;">
                            <span class="">{{ m.text }}</span>
                            <span class="iconfont icon-wodexiansuo"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <n-mention v-if="stepCurrent == 3" :options="options" v-model:value="inputValue" default-value="@"
                    :placeholder="placeholder" style="width: 40%;margin-left: 100px;" />
                <n-input v-if="stepCurrent != 3" v-model:value="inputValue" type="text" :placeholder="placeholder"
                    style="width: 40%;margin-left: 100px;" />
                <n-button v-if="stepCurrent == 7" type="info" style="margin-left: 5px;" @click="saveForm">提交</n-button>
                <n-button v-else type="info" style="margin-left: 5px;" @click="send">发送</n-button>

            </div>

        </div>
        <n-modal v-model:show="showModal" preset="card" title="图标库" :mask-closable="false" :close-on-esc="false"
            style="width: 80%;height: 0%">
            <!-- <template #header>
                <div>看看有喜欢的图标吗</div>
            </template> -->
            <div class="svglay">
                <div class="svgBox" v-for="(j, k)  in IconArr" @click="iconClick(j)">
                    <svgIcon :icon-name="`#icon-${j.font_class}`"></svgIcon>
                    <div>{{ j.name }}</div>
                </div>
            </div>
            <template #action>
            </template>
        </n-modal>

        <n-drawer v-model:show="active" :width="200" :height="placement == 'bottom' ? 50 : 200"
            style="line-height: 50px;" :placement="placement" :trap-focus="false" :block-scroll="false"
            :show-mask="false" to="#scrollListRef">
       
            <n-drawer-content title="文本编辑">
                <div>
                    <!-- <n-icon size="20">
                        <ArrowUndo48Regular @click ="fontSizeUndo"/>
                    </n-icon>
                    <n-icon size="20">
                        <ArrowRedo48Filled @click ="fontSizeUndo"/>
                    </n-icon> -->
                    <n-icon size="20" title="格式刷(双击可连续使用)">
                        <PaintBrush24Regular />
                    </n-icon>
                    <n-icon size="20" title="清除格式">
                        <Eraser24Regular />
                    </n-icon>
                    <div style="height: 1px;background-color: #000;"></div>
                    <n-select v-model:value="popselectValue" size="small" :options="fontList" placeholder="选择字体"
                        @update:value="popselectFontSet" />
                    <n-select v-model:value="fontSizeValue" size="small" :options="fontSizeList" placeholder="选择字体大小"
                        @update:value="popselectSizeSet" />
                    <div style="height: 1px;background-color: #000;margin-top: 10px;"></div>
                    <n-icon size="20">
                        <FontIncrease24Regular @click="fontSizeAdd" />
                    </n-icon>
                    <n-icon size="20">
                        <FontDecrease24Regular @click="fontSizeMinus" />
                    </n-icon>

                    <n-icon size="20">
                        <TextUnderline24Regular @click="fontSizeUnderline" />
                    </n-icon>
                    <n-icon size="20">
                        <TextItalic24Regular @click="fontSizeItalic" />
                    </n-icon>
                    <n-icon size="20">
                        <TextBold24Filled @click="fontSizeBold" />
                    </n-icon>
                    <n-icon size="20">
                        <TextStrikethrough24Filled />
                    </n-icon>
                    <n-icon size="20">
                        <TextSuperscript24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <TextSubscript24Regular />
                    </n-icon>
                    <n-icon size="20" title="高亮">
                        <TextColorAccent24Filled />
                    </n-icon>
                    <n-icon size="20" title="字体颜色">
                        <TextColor24Filled />
                    </n-icon>
                    <!-- <n-icon size="20">
                    <input type="color" id="color" style="height: 10px;width: 25px;"  title="文字颜色"/>
                </n-icon>
                <n-icon size="20">
                    <input type="color" id="color" style="height: 10px;width: 25px;"  title="文字颜色"/>
                </n-icon> -->
                    <!-- <input type="color" id="highlight"> -->
                    <div style="height: 1px;background-color: #000;"></div>
                    <n-icon size="20">
                        <TextAlignLeft24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <TextAlignJustify24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <TextAlignRight24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <TextAlignCenter24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <TextAlignDistributedEvenly24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <TextNumberListLtr24Regular />
                    </n-icon>
                    <div style="height: 1px;background-color: #000;"></div>
                    <n-icon size="20">
                        <TableSwitch24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <Image24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <Link24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <DataWaterfall24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <DocumentPageBreak24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <CheckboxChecked24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <RadioButton24Filled />
                    </n-icon>
                    <n-icon size="20">
                        <Code24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <Timer24Regular />
                    </n-icon>
                    <div style="height: 1px;background-color: #000;"></div>
                    <n-icon size="20">
                        <Search24Regular />
                    </n-icon>
                    <n-icon size="20">
                        <Print24Filled />
                    </n-icon>
                </div>
            </n-drawer-content>
           
        </n-drawer>
    </baseCard>
</template>

<style src="./index.scss" scoped></style>
<style lang="scss" scoped></style>
